<template>
<div id="serached-result">
    <h3>事故查询结果-{{ searchedTotal }}-起</h3>
    <el-icon class="close-btn" @click="$emit('closeTable')"><Close /></el-icon>
    <el-button ><Hot /></el-button>
    <el-button @click="openPan=true">生成统计图表</el-button>

    <el-table :data="panData" style="width: 100%" height="400">
    <el-table-column prop="事件编号" label="事件编号" width="160" />
    <el-table-column prop="事件类型" label="事件类型" width="80" />
    <el-table-column prop="事件等级" label="事件等级" width="80" />
    <el-table-column prop="发生时间" label="发生时间" width="120" />
    <el-table-column prop="发生地点" label="发生地点" width="120" />
    <el-table-column prop="驾驶员" label="驾驶员" width="80" />
    <el-table-column prop="车牌号" label="车牌号" width="120" />
    <el-table-column prop="处理状态" label="处理状态" width="80" />
  </el-table>

  <Teleport to="body">
      <div class="modal" v-if="openPan">
        <PanChart @closeChart="openPan=false"/>
        <div class="mask" @click="openPan=false"></div>
      </div>
    </Teleport>
</div>
</template>
<script setup>
import {ref,onMounted,toRefs,defineEmits} from 'vue';
import PanChart from './PanChart.vue';
import Hot from './Hot.vue';
import { Close} from "@element-plus/icons-vue";
import { useSearchedAccidentsStore } from "@/stores/serachedAccidents";
const { searchedTotal, panData,hotData} = toRefs(useSearchedAccidentsStore());
const tableData=ref([]);
const openPan=ref(false);

const emits=defineEmits(['closeTable']);


</script>
<style scoped>
h3{
    text-align: center;
}
.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>